{% extends 'base.html' %}

{% block title_suffix %}
 | Edit question
{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" content="text/css" href="/static/css/questions.css" />
{% endblock %}

{% block all_content %}
    <div class="page-header">
        <h1>Edit Question <small>Edit an existing question</small></h1>
    </div>
    <p class="lead">
        Descriptive text. This text describes how to work the edit question.
    </p>
    <form action="{% if test %}{% url 'question.views.edit' question_id=question.id test_id=test.id %}{% else %}{% url 'question.views.edit' question_id=question.id %}{% endif %}" method="post">
        <fieldset>
            <legend>Question</legend>
            {% csrf_token %}

            {% if messages %}
                <div class="alert">
                    <ul class="messages">
                        {% for message in messages %}
                            <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            {% include '_new_question.html' %}

            <legend>Answers</legend>
            <div id="answer">
            </div>

            <div class="form-actions">
                <div class="pull-right">
                    <a class="btn" href="{% if test %}{{ test.get_absolute_url }}{% else %}{% url 'question.views.index' %}{% endif %}">Cancel</a>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </fieldset>
    </form>
{% endblock %}

{% block scripts %}
    <script type="text/javascript">
        $(document).ready(function() {
            // Load difficulty
            {% if question.difficulty != None %}
                $('#question-difficulty').val('{{ question.difficulty.id }}');
            {% endif %}

            // Change answer section according to question type
            $('#question-type').on('change', function () {
                // Load the selected question-type partial
                $('#answer').load('/questions/new/answer/' + $('#question-type').val() + '/', function() {
                    // If there are one or fewer dynamic-forms the delete button should be hidden
                    var dynamic_form_count = $('.dynamic-form').length; 
                    if (dynamic_form_count <= 1) {
                        $('#delete-0-button').hide();
                    }

                    {% if answer_data.answer_count %}
                        // Make sure the correct number of answers are shown
                        while (dynamic_form_count != {{ answer_data.answer_count }}) {
                            if (dynamic_form_count < {{ answer_data.answer_count }}) {
                                addForm();
                                dynamic_form_count++;
                            } else {
                                deleteForm($('.dynamic-form').last());
                                dynamic_form_count--; 
                            }
                        
                        }

                        // Populate answer fields
                        if ($('#question-type').val() == '{{ question.question_type }}') {
                            {% for is_correct_answer, answer in answer_data.answers %}
                                {% if is_correct_answer %}
                                    {% if question.question_type == 'single_select' or question.question_type == 'multiple_select' %}
                                        $('#answer-{{ forloop.counter0 }}-is-correct-answer').prop('checked', true);
                                    {% else %}
                                        $('#answer-{{ forloop.counter0 }}-is-correct-answer').val('True');
                                    {% endif %}
                                {% endif %}
                                $('#answer-{{ forloop.counter0 }}-answer').val('{{ answer.answer.answer }}');
                            {% endfor %}
                        }
                    {% endif %}
                });

                $('#answer').off('click', '#add-form')
                // Add an additional dynamic form to the answer section
                $('#answer').on('click', '#add-form', function() {
                    addForm();
                });

                $('#answer').off('click', '.delete-form')
                // Delete a dynamic form from the answer section
                $('#answer').on('click', '.delete-form', function() {
                    deleteForm($(this));
                });
            });

            // Make sure the add/remove buttons work
            $('#question-type').trigger('change');
        });
    </script>
    <script type="text/javascript" src="/static/scripts/dynamic-formset.js">
    </script>
{% endblock %}
